<template>
  <div class="layer">
    <!-- 页头 -->
    <el-page-header @back="() => $router.go(-1)" content="发布文章">
    </el-page-header>
    <!-- 主体 -->
    <el-card class="main-wrap" ref="card">
      <ArticleTag v-model="tag"></ArticleTag>
      <!-- 文章标题 -->
      <e-input
        class="title-input"
        placeholder="请输入文章标题"
        v-model="title"
        :autofocus="true"
      ></e-input>
      <!-- 文章内容 -->
      <e-input
        :class="$store.state.isNightMode ? 'night-input' : 'day-input'"
        placeholder="请输入文章内容"
        type="textarea"
        resize="none"
        class="content-input"
        :height="textareaHeight"
        :isTextarea="true"
        v-model="content"
      ></e-input>
      <div class="public-button-wrap">
        <el-button
          type="primary"
          class="public-button"
          @click="publicArticle_fn"
          >发布</el-button
        >
      </div>
    </el-card>
  </div>
</template>

<script>
import { eConfirm } from "../../components/EConfirm";
export default {
  data() {
    return {
      title: "",
      content: "",
      textareaHeight: 0,
      tag: "前端",
    };
  },
  methods: {
    publicArticle_fn() {
      eConfirm({
        info: "是否发布文章？",
        success: () => {
          let un = this.getItem("un");
          if (!un) {
            this.$router.push("/login");
            return;
          }
          let id = this.getItem("id", 1);
          let now = new Date();
          let year = now.getFullYear();
          let month = now.getMonth() + 1;
          let day = now.getDate();
          this.title = this.title.trim();
          this.content = this.content.trim();
          let date = "" + year + this.get2Str(month) + this.get2Str(day);
          let data = {
            id,
            un,
            title: this.title,
            con: this.content,
            tag: this.tag,
            date,
          };
          let articles = this.getItem("articles", []);
          articles.unshift(data);
          this.setItem("articles", articles);
          this.setItem("id", id + 1);
          this.title = "";
          this.content = "";
          this.$message.success("发布文章成功！");
        },
      });
    },
    get2Str(num) {
      return num < 10 ? "0" + num : num;
    },
  },
  mounted() {
    this.textareaHeight = this.$refs.card.$el.offsetHeight - 200;
  },
  components: {
    EInput: () => import("../../components/EInput.vue"),
    ArticleTag: () => import("../../components/ArticleTag.vue"),
  },
};
</script>

<style lang="less" scoped>
.layer {
  width: 1000px;
  margin: 0 auto;
  height: 100%;

  .el-page-header {
    height: 50px;
    line-height: 50px;
    font-family: initial;
  }

  .main-wrap {
    height: calc(100% - 70px);
  }

  .el-card {
    background-color: transparent;
    .el-card__body {
      height: 100%;
    }
  }
  .tag {
    margin-bottom: 15px;
    span {
      vertical-align: middle;
    }
    .el-radio-group {
      vertical-align: middle;
    }
  }
  .title-input {
    height: 50px;
  }
  .content-input {
    height: calc(100% - 100px);
  }
  .content-input /deep/ textarea {
    height: 100%;
  }
  .public-button-wrap {
    text-align: right;
    .public-button {
      margin-top: 15px;
    }
  }
}
</style>